<template>
 <div>
     <div :class="boxClass" @click="click">
         <div :class="shapeClass"></div>
     </div>

     
 </div>
</template>

<script>
import axios from 'axios'
 export default {
   name:'Animation',
   data(){
       return{
           boxClass:{
               box:true,
               boxBackgound:false   
           },
           shapeClass:{
               shape:true,
               boxactive:false
           }
       }
   },
   mounted() {
       axios('/v1/test/getArticle').then((res)=>{
           console.log(res);
       })
   },
   methods:{
       click(){
           this.boxClass.boxBackgound = !this.boxClass.boxBackgound
           this.shapeClass.boxactive = !this.shapeClass.boxactive 
       }
   }
 }
</script>

 
<style scoped>
 .box{
    margin:10px;
    width:120px;
    height: 50px;
    background: #ccc;
    border-radius: 20px;
    transition: 1.2s; 
    display: flex;
    align-items: center;
 }
 .boxBackgound{
    background:#FF83FA;
 }
 
 .shape{
     margin:0 3px;
     height: 46px;
     width: 46px;
     border-radius: 50%;
     transition: 1.2s;
     background: #fff;
 }
 .shape:hover{
     height: 3600px;
     width:46px;
 }
 .boxactive{ 
    transform:translateX(69px) rotateZ(7200deg)
 }
</style>
